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ABSTRACT 

This paper addresses some of the challenges and 
dilemmas faced by two instructional designers as they incorporated 
visual imagery and audio components into the design of two distinct 
interactive multimedia products. Each instructional product was 
designed as a professional development seminar or series of 
instructional seminars for two distinctly different groups of adult 
learners. Oae product was designed for preservice teachers who spend 
a significant amount of time on campus and in classes, while the 
other was designed for practicing social workers who are employed in 
isolated^ rural areas where access to professional development is 
extremely limited. The following considerations which were identified 
as essential to any improvement of instructional design guidelines 
are discussed: (l) how the visual elements of hypermedia should be 

structured; (2) proper uses of visual metaphors; (3) formidable 
questions inherent in the presentation of content and images; (4) 
when design supersedes content; (5) the importance of the 
instructional designer’s familiarity with new models of instruction 
and learning theory; (6) theoretical elements appropriate for the 
graphi cal"user interface; (7) images, language, and content that are 
free of cultural and gender bias; (8) how images, language, and 
content accurately represent the cultural and gender variables; and 
(9) how formative and summative evaluation should occur. (Contains 40 
references.) (AEF) 
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Recent developments in hypermediated software suggest new challenges for instructional designers of interactive 
multimedia. Product enhancements provide authoring software with increased capabilities for designing and producing 
multimediated instruction. The enhancements permit new possibilities for the appearance and functionality of 
courseware, and thus pose new challenges for instructional designers. 

Further, the increasing ease with which the improved authoring software can potentially be used, could lead to a situation 
in which people produce instructional courseware without the aid or advice of instructional designers. Products that 
result, whether stand-alone desktop systems or those that incorporate other resources such as material from the world wide 
web, have vast potential. Yet the new technological enhancements will not necessarily be applied in a way that truly 
improves the instruction. 

Technology offers “bells and whistles” that seem to have great potential but often take the lead and interfere with 
instructional design. Indeed, if misapplied, the software enhancements could actually befuddle the learning process. A 
framework is needed to provide guidance for people who must produce instructionally sound products that utilize a mix of 
stagnant text, text as a dynamic visual image, still and motion visual images, and audio within a hypermediated format. 
Such a framework can provide the necessary guidance to make wise use of the new enhancements to the technology. 

The processes of linking visual images with visual text, and making connections between realia and the meaning of the 
images in a hypermediated format, lead to questions about effective instructional design of courseware that incorporates 
those processes. Moreover, those processes cause software evaluators to rethink the standard for effective and appropriate 
presentations. 

This paper addresses some of the challenges and dilemmas faced by two instructional designers as they incorporated visual 
imagery and audio components into the design of two distinct interactive multimedia products. Each instructional 
product was designed as a professional development seminar or series of instructional seminars for two distinctly different 
groups of adult learners. One product was designed for preservice teachers who spend a significant amount of time on 
campus and in classes, while the other was designed for practicing social workers who are employed in isolated, rural 
areas where access to professional development is extremely limited. 

The multimedia products present content-specific information pertinent to learners through the use of visual text, still 
images, still and animated graphics, sound, and full-motion video vignettes contained on a laser videodisc or CD-ROM. 
The two programs provide learners with new information, observational examples, and interactive practice about content 
specific to their fields, either teaching or social work. There are many similarities shared between the instructional needs 
of the two products and so many design aspects are common to both, however the graphical-user interfaces between the 
two programs are very different. 

The teacher’s product contained content about the National Council of Teachers of Mathematics’ Standards (NCTM, 

1991 ). Students normally would cover this material in class as part of their regular coursework and through other 
techniques of instruction. The social worker’s product differs in purpose. It offers ten different topics of study that are 
not addressed within the course of regular university preparation for social workers. The topics were determined by 
conducting a needs assessment with practicing social workers. 

The social worker’s program is quite extensive and is being developed as a series of ten separate modules with similar 
functionality to accommodate people who have very limited computer skills. It uses standard design elements such as 
text-based menus, buttons, pop-up text boxes, concept maps, and the choice of receiving audio-based, text-based, or a 
combination of audio and text within the instructional interface. 

The teacher’s program replaces text menuing with a graphical user interface (GUI) that presents familiar objects within a 
traditional school setting. The main menu is a graphic of a school hallway lined with doors and an exit sign. Each door 
leads to a room that contains desks, books, and chalkboards to access information. This program also contains an 
electronic notebook in which the learners can write their questions and reactions to their observations. Both programs are 
hypermediated, employ video vignettes, and contain a presentation component, an application component, and an 
assessment component. 
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Both product design teams were able to follow some common theoretical elements of interactive system design, yet both 
broke new ground in their own way as they strove to create a product best suited to their given audience and instructional 
needs. Formative evaluation was conducted on both programs (Clark, 1995; Knupfer, Barrett, & Lee, 1995). In addition, 
summative evaluation was conducted on the product designed for teachers (Clark, 1995). Results of the summative 
evaluation of the teacher* s multimedia product indicate that significant differences occurred in the abilities of teachers who 
used this program to identify, understand, and explain specific teaching strategies they observed in the video vignettes as 
compared to those who did not use the multimedia. 

The product designed for social workers is much more extensive; it represents a series of ten distinct topics of study that 
each carry three continuing education units of credit. Each topic is considered as a unique course of study and is contained 
in a separate, but coordinated module like one title in a series of books written by different authors but with a single 
series editor. Although the ten modules are designed as a set of training for social workers, the modules can be studied in 
any order and in any amount. The criteria for receiving credit for each module rests in completion of an on-line test with 
a passing grade. 

The social work modules are being phased into numerous communities as the development progresses and eventually all 
ten modules will be in place in numerous locations. As each module of the series is developed, it goes through 
formative evaluation and field testing. Summative evaluation will be conducted after several modules have been placed 
into the social work offices in various communities. This paper limits discussion to the first module, Child 
Development, for the sake of simplicity and clarity. 

Success of any product’s effectiveness will be affected by the learners’ acceptance or attitude toward the product, the 
product’s match with learners’ needs 1 >th in a technical sense and in terms of content, and the product’s ability to be used 
within a given environment. Therefore any evaluation must also consider the reactions of both the social workers and 
preservice teachers to using the hypermedia. Results of the evaluations to date suggest some guidelines that instructional 
designers should consider when designing such products. Further, as we think about ways to improve those products and 
enhance their content and functionality with material from outside sources, such as those from the internet, we need to be 
able to evaluate the quality of the outside resources as well. 

Interactive multimedia computer tools can expand our ways of thinking and perhaps encourage metacognition, more 
deeply than software that contains only standard text, few images, or non-interactive video. In interactive multimedia 
contexts, learners browse and search through video, images and text; form interpretive thoughts; make connections 
between visual text, still images, and full-motion video images; and cluster discrete fragments of information into 
meaningful ideas. The challenge for instructional designers is to take the set of guidelines that has been developed for 
interactive, computer-based instruction, and extend them to include guidelines that consider the dynamic nature of the 
myriad possibilities that become available with new technological tools, resources, and techniques. 

As authoring tools become more transparent and more people become skilled at incorporating the internet into their 
work, the volume of interactive, multimediated software intended for self instruction is likely to increase. This increase 
signals two things: more software that is produced by novice instructional designers or people who have limited 
knowledge of techniques appropriate to efficient learning, and the need for guidelines to use in the production and 
evaluation of the hypermediated software. Such a design framework will go beyond the guidelines used for computer- 
based instruction as we knew it a ftw years ago and if not able to provide succinct answers, will need to at least address 
additional areas of possibilities. 

Designing hypermediated instruction is a formidable process. It calls for deep analysis of many interconnected and 
dynamic components, and results in a set of organized activities and processes (see Andrews & Goodson, 1980, and 
Gustafson & Powell, 1991). One critical component of hypermediated instruction is the use of visual imagery. Knupfer 
has suggested guidelines for employing visual imagery within computer-based local and distance instruction that 
incorporate some of the well-established standards for instructional television production (1994a; 1995). There is a need 
to take that set of guidelines and extend it even further. In doing so, the following questions seem essential to any 
improvement of instructional design guidelines for interactive multimedia. Their answers help to construct a possible 
framework to guide future designs for hypermediated learning: 
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• How should the visual elements of hypermedia be structured? 

• What are the proper uses of visual metaphors? 

• What are the formidable questions inherent in the presentation of content and images? 

• When does design supersede content? 

• What is the importance of the instructional designer’s familiarity with new models of instruction and learning theory? 

• What theoretical elements are appropriate for the graphical-user interface? 

• Are the images, language, and content free of cultural and gender bias? 

• How do the images, language, and content accurately represent the cultural and gender variables? 

• How should formative and summative evaluation occur? 

Although there are no answers that will work in all situations, for all audiences, there are some considerations that 
designers can incorporate into the planning process. Further, as hypermedia takes fuller advantage of on-line resources it 
will be important for designers to consider strategies for handling dynamic information and images from outside sources, 
such as the internet. 



CONSIDERATIONS 

How should the visual elements of hypermedia be structured? 

Visual imagery is one of the most important elements of hypermediated instruction, yet many designers fail to 
incorporate it to it fullest potential. If used wisely the visuals can greatly enhance the instructional message. Like other 
elements within the product design, visual information needs to be applied in a consistent manner yet with attention to a 
comfortable blend of variety and aesthetics. Both of the products evaluated for this study did an excellent job of applying 
visual elements to a certain extent, and both have areas in which they can be improved. 

The greatest weakness of both products stemmed from the limited experience of certain key decision makers who lacked 
enough skill to visualize elements of the learning process. Having not been trained in instructional design, nor visual 
learning, nor graphic design, nor aesthetics of art and so on, some key leaders were greatly limited in their ability to 
imagine the potential of the visual messages within each product. 

Certain weaknesses within each product, both in terms of adding time to the production and in the final visual message, 
were the direct result of decisions made by project leaders who did not understand how to take advantage of the medium to 
enhance learning, tried to save time by skipping steps in the design phase, and placed too much responsibility on 
programmers to provide design solutions toward the end of the development cycle. The complexity of reasons for these 
weaknesses are beyond the scope of this paper, but the resulting compromise in potential learning is most evident in 
certain mismatches between video imagery or graphics and the content or tone of the script. 

There is no doubt that the single most important factor in the successful instructional design and imagery used was the 
result of teamwork that drew on the talents of a variety of people. Communication among the design team was essential. 

Successful visualization within each of the products was the direct result of being able to work with a talented artist who 
was able to shape the ideas into visual form that carried meaning into the instructional process. In order to do that, the 
artists needed to be emersed in the design process from the beginning. They turned ideas into images that communicated 
visually. Their choices of shapes, colors, representations, animations, morphing, and transitions had a major influence 
in each of the final products. The visual elements that seem most important are those that comprise the basic structure 
of the image, add meaning to the message, and employ the power of visual impact when appropriate (Knupfer, 1994b). 

The Structure of the Image 

The structure of the image first considers the visual as a whole, then its components and the elements of good screen 
design. In order for the various image components to work together, elements of well-planned screen design must weave 
the components together in an aesthetically pleasing and understandable format. Thus, one must consider both the 
separate image components and the screen design as a whole. 
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The Image 

The image contains a mix of components that can work together or separately to modify the intended message. Text, 
color, graphics, animation, the multimedia mix, size, special effects, and the dynamic nature of the components all will 
influence the message delivery and resulting interpretation. 

Text In the late 1980s, text dominated computer-based instruction (Soulier, 1988). Improved technology and 
attention to visual design offer the potential for more variety within the imagery, and many courseware designers have 
incorporated more graphics. Yet it appears that much of the information available from computer courseware and from 
internet resources, does not take advantage of this capability and seems to use text-intensive screens. 

Analysis of the social worker’s courseware revealed a strong effort at visual design. Graphics and video were incorporated 
throughout the courseware, yet the majority of information was contained within the text, with the imagery used for 
emphasis, reinforcement, or aesthetic value. Analysis of the teacher’s courseware revealed that graphics were used to 
caiTy the message in certain places and to support the textual message in other places. Both the social worker’s and 
teacher’s courseware depended heavily on the audio script to support video imagery. In addition, the social work material 
offered the learners the ability to view the text of any audio script in addition to hearing it. None of the learners utilized 
this feature, yet it was left in the product to accommodate learners who might be hearing impaired or use the material in 
an office with environmental noises that might interfere with their ability to hear the audio. Both products incorporated 
volume control. 

When graphics alone are used to carry the message, the graphics muse be concise enough so that learners are able to 
understand the message. Likewise, when large amounts of text are presented, it is important to design text displays that 
communicate clearly to the reader. With appropriate fonts and spacing, computer screens can work very well for 
presenting limited amounts of text. Large amounts of text work better in printed form (Soulier, 1988) since they induce 
eye fatigue (Hathaway, 1984; Mourant, Lakshmanan, & Chantadisai, 1981) and are likely to be forgotten when present©! 
on the screen (Wager & Gagne, 1988). 

In addition to the amount of text, its density, along with typographic cueing and the mix of upper-case and lower-case 
characters can affect legibility (Hartley, 1987; Hathaway, 1984; Morrison, Ross, & O’Dell, 1988; Ross, Monison, & 
O'Dell, 1988). Variations in font type, size, and density along with direction and screen placement can add meaning to 
the text image. With the exception of selected levels of titles and headings, or special effects, the text should contain a 
mix of upper and lower case letters. 

The teacher’s product did not contain titling and depended upon the graphics of the user interface to act as a map for the 
learner. For example, starting with a hallway lined with various doors, the learner would click on a doorway of a specific 
room and by moved into that room. From that point, the learner used objects within that room until the hallway pass 
was chosen to exit that room and return to the hallway. The social worker’s material began by using a single level of 
titling, but changed to a more precise title plus subtitle system after formative evaluation revealed confusion. 

No matter what the screen design, legible text requires an appropriate font that is properly spaced. There is disagreement 
about the appropriateness of serif or sans serif style fonts. Some authors claim that fonts with serifs, as opposed to 
block-style lettering, are a better choice for computer screens (Soulier, 1988). Yet others believe that sans serif fonts 
with proportional spacing provide a cleaner effect that is easier to read than their seriffed counterparts (Gibson & Mayta, 
1992; Kemp & Dayton, 1985). Fonts with small serifs can add interest to the display, while elaborately-seriffed fonts are 
difficult to read, especially if the image is to be viewed on television or projected in a large room. 

Text legibility also depends upon the point size of the font. The point size of text on a computer screen can range from 
12 to over 100 points per inch and remain legible. However one should consider the intended usage when selecting point 
size. Images that are likely tc> be projected for large audience reading should not use a point size smaller than 26 (Gibson 
& Mayta, 1992) and images that are not likely to be projected or broadcast will seldom require an extremely large font. 
Also consider the user; when designing screens for young children or people with visual impairments, use a larger font. 

In addition to style and size of the font, the weight of the typeface, line length, phrasing, and spacing between lines of 
text affect the legibility of computer screens (Jonassen, 1988; Morrison, Ross & O Dell, 1988). The weight of a font 
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can vary from light, narrow, fine lines to heavy, broad, bold lines. A medium to bold weight is very good, depending 
upon the mix of elements on the screen. Gibson and Mayta (1992) recommend that bold typeface be used throughout all 
computerized screen images that are intended for broadcast so that the text shows up against the graphics. At the least 
bold fonts should be used for all titles and headings as well as for particular words that need emphasis in a projected 
image. Bold fonts are not necessary if the image is to be viewed on a single computer screen. Medium weight fonts are 
quite legible if the color mix and font style are compatible. If using a small font to preset a large amount of text on an 
individual screen, a lighter weight font will be more legible. 

Drop shadows behind the text characters can add legibility if used carefully, but they can also interfere with legibility. 
Therefore it is important to check legibility prior to applying drop shadows throughout the courseware. 

The design of hypermedia resources must consider the effects of mixing text in a way that follows known layout practices 
to aid learning and retention, while attending to individual preferences, habits, and usage situations. All of this must 
consider mixing media in a way that allows learners to recheck information that they do not commit to memory. 

Text that is designed as part of the visual imagery can add impact to the on-screen presentation. This visual text can be 
stagnant or dynamic and has the ability to add meaning to the message. Text can employ hotlinks to more information 
and color-coding to suggest meaning and serve as an aid to navigation. Although it is tempting to use flashing text as a 
way of getting attention or using a fancy technique, this should not be done. The flashing can interfere with the brain 
functions of people who are light sensitive or who have a seizure disorder. 

No matter what exact techniques are used from the range of possibilities, learners seem to be more able to find their way 
around when the user interface is simple and consistent so learners know what to expect. Thus for text-dense sections, it 
is better to design screens that present categories of information concisely with links to other screens rather than 
presenting long scrolling screens of text. If the navigational interface includes consistent return paths following each 
section, then the learners can navigate with less chance of getting lost. 

Color. Specific educational objectives can be enhanced by using color in visual illustrations (Dwyer, 1978), but while 
a few colors can cue the learner about the intended message, too many colors can be confusing. Color should assist the 
user in focusing on the material; it should never be a distraction (Gibson & Mayta, 1992). Accordingly, Hannafin and 
Peck (1988) suggest using a bright color to cue f he learner for new information, while presenting the remainder of the 
information in standard colors consistent with the rest of the screen. Soulier (1988) recommends checking the program 
on a monochrome monitor and when in doubt about legibility, use a different color or employ patterns as a backup 
technique to aid those people who are color blind. 

Color can be used as a visual cue to indicate hot words, type of multimedia activity or link, flow of information such 
introductory or summary sections, or as a navigational aid to highlight menu choices, content maps, and so on 
Whenever possible, it is helpful to use colors in a way that does not conflict with outside materials that are likely to be 
incorporated as part of the instructional flow. For example, if learners will search the internet as part of the instruction, 
then color coding of hot links should be used in a way that is likely to be employed in those materials as well as opposed 
to simply choosing your color coding independently of that situation. 

A few colors with good contrast values will show up well on both color or monochrome displays, but an extreme 
contrast like stark white on a black background will cause bleeding and illegibility; it is better to use light gray to 
achieve the desired effect. Also avoid high values of red and orange because they can bleed into the surrounding colors. 

In addition, certain colors that look ideal on an individual computer screen tend to flare or wash out when they are 
projected to a large screen or transmitted over a distance. To avoid disappointment it is best to experiment with a few 
color combinations using the equipment that will support the image when it is actually projected. Complementary 
colors with low saturation would have a good chance of working. 

Graphics and Animation . Graphics add interest to the screen by providing visual variety (Kemp & Dayton, 1985) 
and offer another opportunity to suggest meaning to the learner. There are many ways to incorporate graphics into 
learning, yet designers often forget to determine the instructional reasons for using graphics prior to making decisions. 
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Five main categories of instructional applications of graphics include cosmetic, motivational, attention-gaining, 
presentation, and practice (Rieber, 1994). Possible graphic treatments range from simple to complex, from small 
monochromatic embellishments to dramatic, richly-colored, full-motion video images complete with sound effects. Prior 
to deciding on uses of graphics, it is important to consider the instructional meaning of the graphic. In the social work 
project this guideline was extremely difficult maintain because like many others, key people in authority positions had 
been fooled into thinking that dramatic visual effects translated into dramatic learning, regardless of instructional purpose. 

Graphs that display data depend upon the reader’s thought processing, interpretation, and comprehension; to be effective 
they must consider the intended visual message carefully. Sophisticated graphic displays that are designed l to .suggest 
inferences, generalizations, and evaluative interpretation can help students interpret meaning (Reinking, 1986, Singer & 
Donlan, 1980). High-level instructional graphics, such as symbolic, schematic, or figurative displays can be effective in 
teaching, and the visualization of abstract ideas through figurative displays may very well enhance learning (Nygard & 
Ranganathan, 1983) All graphics do not require the same level of detail and clarity, but even simple, decorative graphics 
at the pictorial level have their place. Indeed, Boyle (1986) suggests a need for designers to address cognitive processes 
by developing more materials for graphic thinkers, not just graphic readers. 

The Child Development module contained a challenge that was nicely resolved through visual graphics. Rather than 
simply presenting a growth chart as a line graph, the information was displayed interactively. Two figures, one girl and 
one boy, were compared side by side on the screen. Learners could enter information about age, height, or weight and see 
visual representations that compared boys to girls at key stages of growth. The combination of interactive visualization 
seemed to help learners conceptualize important stages of physical development 

To assist with designing computer graphics, Soulier (1988) offers the following guidelines: keep illustrations 

appropriate for the audience; Use simple line drawings when possible; preload graphics into the program so that they 
appear quickly on the screen; use standard symbols and symbolic representations; and keep graphics on the same screen in 
close proximity to the corresponding text message. These few tips can greatly improve the aesthetic appeal of a graph.c 
and promote clarity of the message. Even though multimedia supports elaborate graphics with a host of detail and many 
colors, use care in developing those graphics so that they fit the need. Sometimes it will be important to provide near 
photographic quality images, but other times that is completely unnecessary and only takes up memory while slowing 

the program processing. 

Most development software allows the use of simple animation to illustrate a motion, provide interest, or draw attention 
to particular areas of the screen (Kemp and Dayton, 1985). Although it is tempting to embellish the graphic, it is 
important to use animations only when appropriate and keep them short (Soulier, 1988). 

In order for animations to be effective, there must be a need for visualization. Animate only a few graphics that will aid 
the learners’ comprehension of the material by, for example, gaining attention, illustratmg a concept, or showing 
direction. When used sparingly animations can be effective, but they can become irritating, distracting, or disruptive to 
the thought process if overused or left on too long. Whenever possible, allow the user to interrupt the animation. 



Good screen design aids the learner by using visual components to portray the message in a way that provides both 
clarification of information and visual interpretation. To visually aid the learner, it is necessary to consider the specific 
elements of good screen design as well as the general screen layout. 

Elements of Good Screen Design. Interesting screens are composed of a variety of elements that work well 
together. Many of these elements are equally important so they are presented here in no particular order. The goal of 
good screen design is to use the various elements together to compose a simple, consistent design that provides suff tcient 
information while avoiding clutter. 

Unlike printed material which can be skimmed at will the computer screen limits the learners’ view of the overall 
content Screen designs that are simple, straight forwa d, and consistent can help lead learners through the material, 
while complicated designs can lead to frustration. The basic simplicity of frame layout and user options does not restrict 
the ability to add interest and meaning with a full range of simple and complex graphics. 
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The graphic user interface in the teacher's multimedia project presented a simplified view of a school. Each room 
contained certain information that would be familiar and suggest meaning to the learners, but extra elements were left 
out. Possible problems with such a graphical user interface are likely arise when the imagery or graphical metaphor 
presents an environment that is unfamiliar to the learners. Also, it is important to establish patterns of linkages within 
the graphics so that the learners know what to expect. For example, the images that contain hotlinks shou‘<*, be obvious 
to the learners. They should not have to makes guesses about which images are active and which are not active. 

Certain user options should always be available. For example, status lines at the top or bottom of the screen that 
contain consistent information help the learner assess progress and mwi tain some control over the program direction. 

The reader should control the display rate when possible so that there is adequate time to read the text, interpret the 
graphics, and consider the meaning of the message. A few standard templates will aid programmers and learners. 
Programmers can easily update images or text if fits into a template without experiencing misalignments. If designed 
consistently, learners know what to expect from patterns of information and program functionality within template areas. 

Menus should be clear, concise, uncluttered, and consistent. Icons within menus can be very helpful if the meaning of the 
icon is readily apparent. The range of possible choices in some programs can lead to cluttered or excessively layered 
menus; pull-down menus can be a solution. Highlighting or fading some menu choices will quickly give a visual cue 
about which items are currently available. 

Careful positioning of text on the screen can add to its aesthetic appeal and legibility. Although centering can work for 
lists, diagrams, or graphic mixes, most text should be left justified and limited to 65 characters per line or 25 characters 
per line for projected images (Knupfer, 1994a). Partitioned screens in which text is confined to specific areas, can work 
very well. 

Ross and Morrison (1988) suggest using a hierarchical text display that is vertical and uses indentations similar to an 
outline. They further recommend a low-density text display with reduced wording and sentences limited to one main idea. 
Also, it is important to use care when splitting lines so that phrases remain complete Soulier (1988). Personal 
preference varies concerning the spacing of text as long as u is legible, but do provide text breaks where the content 
allows. In the case of a completely graphic menu, the images should be limited to those that are necessary and should 
also suggest an obvious meaning. There is disagreement about whether icons should be labeled, but one compromise we 
can suggest is to provide labels within balloon help. The social worker's product incorporated icon labeling in that 
manner so that a label appeared only when the mouse passed directly over an icon. 

In addition to font size, the text legibility is influenced by contrast with the background. Common considerations for 
both computer screens and video images suggest cool, neutral background colors like gray or blue instead of bright, very 
light, or very dark backgrounds. Tasteful use of enhancements such as outlined, inversed, flashing, or drop shadowed text 
can add to legibility. The wide variety of patterns available for backgrounds can create visual interest, but those 
background patterns can also interfere with the legibility of text. 

Special techniques for changing the screen display, such as zooming, panning, tilting, and wiping onto the screen, can 
vary the viewer’s perspective of the image. For example, a section of the screen can be enlarged to give a close-up view 
of specific details. Or the image can change from a long shot displayed in a small part of the screen to an extreme close- 
up showing part of the same image aisplayed in full screen mode. This technique can give the learner the sense of 
moving in to take a close look at the image. Imagine, for example, the visual effect of looking at a long shot of a group 
of trees in a small box on the screen and then changing to a full screen display of a close-up shot of leaf on one of those 
trees. 

When projecting computer images to a large screen system, overscan and underscan considerations become important 
(Knupfer, 1994a). Overscan fills the screen beyond the edges so that no blank space will show around the edge when the 
image appears on a television monitor; computer graphics need to be produced in overscan mode so t.tat no blank edges 
or distracting video signals will show around the edges during transmission (Gibson & Mayta, 1992). Underscan protects 
a blank area around the screen edge so that images don’t get cut off during the transmission process; important 
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information should be placed within a safe area, usually the middle two-thirds of the screen (Kemp, 1980). This is 
especially important when determining proper placement of navigational aids at the screen edges. 

Both the social worker’s and teacher’s multimedia products in this study, were designed with for use by individual 
learners, but the products also needed to function for large group presentation in certain situations, so issues of text size, 
overscan and underscan were important. A second common problem with computer-produced screens is changes in color 
that emerge as the image passes through different equipment. For example, color selection might not hold up during 
projection, colors might appear different or even washed out on different screens. Even if it looks wonderful on the 
production machine, always check your images on equipment and situations available to the end users. 

Screen Layout. The elements of good screen design work together to build a cohesive screen layout. The computer 
screen layout should never be visualized as a printed page filled with text, but guidelines similar to those offered for 
desktop published materials can be helpful. These include balancing text with white space, improving the aesthetics of 
the page, and positioning graphics as the dominant visual element (Parker, 1987). Designing the display with attention 
to legibility, the purpose of the particular frame, and consistent protocol, can result in visually interesting computer 
screens. Avoid cluttering the screen with too many images; provide print copies of complicated images that are 
important to remember. The social worker’s project produced a workbook with text intensive and supporting materials 
that were best offered in print. Support material included pages about child development that could be Xeroxed and set 
home with parents. These worksheets would be especially valuable to parents who are tracking patterns in children 
suspected of having delayed physical, mental, or emotional development. 

Like silence within oral communication, empty spaces can be used to advantage on the computer screen. For example 
the screen can be used to organize or highlight information, to draw attention to particular parts of the frame. The mix of 
graphics and text can provide a visual cue; so can boxing and grouping of information. Partitions, borders, standard 
icons, and consistent placement of common elements will visually aid the reader. 

While partitions and borders can draw attention to an area, artistic sense can still flourish. Double borders or pseudo 
bordered areas can create an interesting effect, but use care when partitioning screens. Screens areas can help learners 
know where to look for certain types of information, but excessive use of boxes and boarders can also disrupt the flow of 
information and signal novice design skills. 

Headings are often centered and bold, or sometimes even boxed. Although this is not necessary for nonbroadcast 
multimedia, headings should at least be used consistently. For long or complicated sequences of instruction, subheadings 
can be used that include numbers or roman numerals to aid the reader in visually following the general flow of 
information. As a general rule, information should flow from the top, left part of the screen to the bottom, right part of 
the screen because that is the way people in our culture read. Variations in standard layout can work if they are with 
purpose and fit the situation. Challenges in this area are likely to arise when incorporating information from outside 
sources or designing information for a wide variety of users, in a multicultural or world-wide sense. The projects in this 
study applied limited resources to specific and known audiences, so this did not become an issue beyond the normal 
attention to gender and culture within the language, imagery, and examples employed. 

Good layout technique depends upon an understanding that not all computer frames are alike. Hannafin and Peck (1988) 
address transitional, instructional, and question frames. Transitional frames are used to tie together the different parts of 
the a computerized lesson: they provide an orientation to the beginning of, and various sections within, the program; 
they serve as bridges between various topics or sections; they provide feedback, directions, and instructions; and 
periodically, they present a progress report to let the learner gauge success. Instructional frames present basic 
information to the learner: these frames can alert the student to a need for prerequisite information; provide links between 
relationships from past and current learning; and provide definitions, examples, and rules. Question or criterion frames 
solicit input from the student to help individualize the instruction; these frames usually are based upon a true or false, yes 
or no, multiple choice, completion or short answer, or a constructed response which is considered to be a more open- 
ended answer. 

There are also variations to the general type of frames. For example, sometimes a frame contains both instruction and a 
question. Copy frames, prompt frames, hint frames, and interlaced frames are some types of variations (Hannafin & 
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Peck, 1988). Copy frames provide information and a question about that information in the same screen. This type of 
format can be helpful in directing student attention, emphasizing important points, and for assuring a high degree of 
success for particular students. But because they are so obvious, copy frames are considered very elementary and need to 
be used sparingly. 

Prompt frames direct the learner to supply input; these can be used effectively for questions as well as instructional 
screens. Hint frames are usually provided after a student has failed to enter an expected response; they offer guidance but 
do not supply the correct response. Interlaced frames are hybrids which combine various components from the standard 
frame types; th^y might include instruction, question, and feedback all on the same screen. This design can appear 
cluttered if not presented carefully but it has the advantage of allowing the student to visually examine and compare the 
question and feedback. 

Each type of frame depends upon grouping of information in a way that visually aids the reader. To make optimal use of 
visual cues, it is helpful to design standard protocol for each type of frame and use it consistently throughout the 
program. Whatever protocol is chosen will need to comply with the overall program design. Programs that vary the 
screen location of pertinent information or procedures used to advance throughout the program can be confusing and 
frustrating (Mackey and Slesnick, 1982). Although standard protocol is necessary (Apple, 1992; Heines, 1984; Jonassen, 
1991; Lentz, 1985; Simpson, 1984) designers can provide artistic variation to other parts of the screen to suggest 
meaning. 



The Meaning of the Image 

Information becomes valuable as it takes on meaning for an individual. Since visuals are meant to aid in the discovery of 
meaning, it follows that well-designed visuals will help students interpret the meaning. Computer images vary widely in 
potential design and usage. Images can be static or dynamic, concrete or abstract, and they can change as a result of user 
interaction with the program. A learner’s interpretation of the image can be affected by the text, type of graphic, and 
layout employed. 

Layout must consider the principles of perceptual organization, which include similarity, proximity, continuity, and 
closure (Bloomer, 1976). These four processes, by which the mind organizes meaning, depe^ on how physically close 
the objects are, how similar they are, whether there is a continuous line to guide the eye, and whether the minimal 
amount of information is present that is necessary to obtain meaning or closure. Comprehension is directly affected by 
the way the mind organizes meaning from the placement of graphics and text (Norman, 1993) and in the process of 
linking information. 



The Power of the Image 

Computer graphics and appropriate screen displays can lend power to communications by adding vivid imagery to the 
text. Visual images can aid message interpretation and enhance learning. They can also add power to the message by 
providing an emotional element that is beyond that of other communication strategies. Realism can be enhanced by 
providing a graphic component. Images can represent realistic data ranging from simple sketches or graphs to intricate 
displays or vividly emotional scenes. Virtual reality can even conjure up imaginary situations through artificial imagery. 

Brenda Laurel compares computer programs to theatrical plays and describes several similarities between the two (1993). 
Although computer programs can allow different paths to completion, they are similar to plays in that they should have a 
beginning, middle, and end. In addition, both can provoke emotions. 

Emotional impact can be added to hypermedia by using graphics that evoke feelings or encourage learners to imagine 
certain situations. Size, color, shape, dynamic images, and special effects can be employed to evoke emotions, but it is 
wise to use a conservative approach and not overdue these techniques. 

Hypermedia can display still or dynamic photos of real or imaginary events. These events and their results can combine 
with text and audio segments to provide a sense of realism to the user that otherwise would not be possible. The Child 
Development product evoked emotional impact by showing still and motion images of children in real situations of 
school, play, homes, and hospital settings. The teacher’s product showed real classroom scenarios. Along with the 
understanding provided by the realism of these events, comes the potential to stir emotions for various reasons. 



345 

It 



What are the proper uses of visual metaphors? 

Like verbal metaphors, visual metaphors can help us to understand an unfamiliar concept. Metaphoric graphics (Soulier, 
1988) may be used to clarify a meaning within the computerized message, or they can guide the user through the 
mechanics or functionality of using the software. For example, standard male and female icons represent content in the 
growth chart portion of the Child Development product while an exit sign icon symbolizes the functionality of both 
products. Both products in this study used a typical “VCR” control panel to manipulate viewing of the video clips. 

Metaphors are only as good as a situation allows. Metaphors can work well in a variety of situations, but in all cases 
must provide an appropriate match between the topic, the learners, and the way the metaphor is applied to the design. If 
learners cannot relate to the metaphor, then the instructional message will be lost. But if they can relate to the metaphor, 
then the instructional message can be enhanced. 

Metaphors are used to some degree in both the social work and the teaching multimedia projects, but they are applied 
with differing intensities. The social work project incorporates a variety of limited metaphors into the modules, but does 
not place heavy emphasis on does not carry any one, single metaphor throughout the entire series other than in the 
overall functionality of the user interface. For example the legal module was developed by different design team members 
and contains different metaphors than the stress module, yet the general functionality of the user interface remains 
consistent. 

The metaphor within the teacher multimedia worked well with the student teachers it was intended to be used with, but 
other learning audiences have reacted with confusion and frustration . Objections to the completely graphic interface 
arose because some learners could not relate to the school scenario, needed more preliminary interpretation of the 
graphical user interface, or preferred environments that were more text-based. General comments about desiring more text 
indicated some potential for confusion with interpreting the school metaphor as well as unclear functionality of each 
graphic. Learner who re willing to explore will probably feel more comfortable in this type of environment. 

What are the formidable questions inherent in the presentation of the content and images? 

How many links per screen are appropriate? The number of text links per screen can become quite dense, depending upon 
the situation at hand. When there is information that is critical to the instruction, designers need to weigh the 
consequences of allowing learners to explore branches of that information in-depth or finding extraneous information 
versus concentrating on a limited amount of critical information.. We found that time and concentration efforts were 
limited in both the social work ana teacher subjects who used these products, so they choose to get through the 
instruction in the quickest way possible, ignoring many links. 

The number of links per screen certainty will depend upon the purpose of the instruction, the audience involved, time 
available, consequences of learning more or less information about the topic, and whether the links confound or enhance 
the potential learning. It appears that a screen can have numerous links as long as there is an obvious way to return that 
screen, to exit a link that is erroneously chosen, to indicate which paths have already been taken, and to aesthetically 
work the links into the screen without adding clutter that distracts from the main flow of information. 

The balance of images per screen will not be determined by a precise definition, but will depend upon the purpose of the 
imagery, the balance of the screen design, and the functionality of the images. It is perhaps better to design one complex 
but integrated set of images as opposed to independent, cluttered, or conflicting images. In addition, the meaning of the 
images is important. All images should fulfill a specific purpose. That purpose might be to get attention, enhance 
meaning, make a powerful statement, add variety, and so on, but it clearly should not be simply to fill a blank space on 
the screen. 

The length of the video vignettes was a topic of debate with both of the projects at hand. While the vignettes need to be 
long enough to provide meaningful scenarios that portray information clearly, they need to be short enough to allow user 
interaction, practice, and feedback at appropriate places. Large amounts of video information can be incorporated as 
smaller video clips as long as there is a common thread that laces the information together and promotes interaction that 
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helps learners make the cognitive link between pieces. If video is shown in smaller clips, the challenge becomes one of 
determining proper entry and exit solutions. Transitions become very important yet need to accommodate learners in a 
hypermediated context, not in a linear sense. Novices on our projects had difficulty designing a product with a 
beginning, middle, and end that is was not linear. 

When does design supersede content? 

Some people might say never , but there are times when the design needs to supersede content. Courseware must show 
consistency within the user interface, so once a design standard is decided upon it must be maintained in a similar manner 
throughout the instruction. In addition, designers need to be aware of standards and common practices that have been 
incorporated into other software that the learners have used in the past. If learners expect the software to function in 
specific ways, then it is best to incorporate standard practices when possible so that learners can concentrate on the 
content and not be confused by inconsistencies of functionality. 

In a case where the instruction is designed as a series of modules, learners expect one module to function in a similar 
manner as another. Like a series of books in a set, learners expect certain consistencies within the look, feel, tone, 
instructional approach, and functionality of the courseware. 

When content can be delivered in a variety of ways, design can determine final decisions about how content is delivered 
and how much detail is appropriate. Because hypertext allows hotlinks to be made, designers are not pressed to include 
all details about a subject within the main part of the courseware, but can use links to outside resources as necessary, 
thus enabling learners to choose more or less detail, depending on how much information they need about specific topics 
and how much time they can spend at the given moment. 

Screen design enters into consideration as well. Good screen design allows adequate white space so that the eye has a 
resting place and incorporates imagery in a meaningful way. Rather than filling the screen with text, designers often nesd 
to reword and abbreviate text so that it fits well within the visual design of the screen and in so doing, need to consider 
grouping of words, phrases, and lists in the best way to enhance the mental processes. Substituting imagery for text can 
add power to the message. 

Product design should to meet the needs of the intended audience. Products need to fit within the intended learning 
environment in numerous ways and in so doing, consider the hardware available, the physic" 1 work environment, and the 
emotional state of the learners. The best products will fall short of intended results if people need to struggle with 
hardware, can't hear the audio, can't fit instructional sequences into available timeframes, and so on. 

The audience might expect media to contain special effects like they see at the movies or on television. The maturity of 
the audience could very well be a factor in this regard and should be considered. It will be important to use special effects 
wisely so that they add to the purpose of the instruction. 

What is the importance of the instructional designer’s familiarity with new models of instruction 
and learning theory? 

Design team members debated about whether the sam j instructional approach could be used for everyone who will use the 
courseware. If not, then how could the designers accommodated different learning styles within the courseware? 

Like other types of instruction, hypermediated instruction can provide examples, practice exercises, and feedback that will 
use a variety of instructional techniques and appeal to different styles of learning. As hypermedia becomes more 
sophisticated and gains capability of incorporating outside resources, designers can leave more discretion to user 
preferences. It remains a challenge to design for the type of cognitive processing allowed by hypertext while including 
some sound design practice from standard computer-based instruction. Even though hypermedia links and standard 
computer-based instruction seem to approach design in opposite ways, cognitive interpretations of instructional design 
reveal many similarities (Jonassen, 1991). 
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It will be important that designers break free of behaviorist models to the extent that the courseware does not rely so 
much on that approach. Hypermedia allows a much more creative approach to instruction than the drill and practice style 
of learning, so designers can incorporate more constructivist approaches to courseware design and student evaluation. 

Designers can do such things as provide more choices within the user interface. Those choices could allow learners to 
move in different paths through the material and incorporate more or less information into the lesson as needed. In 
addition, learners should not be forced to listen to audio or to read text verbatim at all times, but should be allowed 
choices to hear, read, or hear while reading text in specific situations within the learning. Thus learners can choose to 
receive information in a way that is most comfortable at a given time. 

Expectations for the potential of hypermedia are high, yet learners in both the social worker’s and teacher’s products 
experienced a certain level of disorientation and they tended not to use fancy features and graphic links. This raises 
questions about the need to prepare learners to better use hypermedia and to better read visual imagery. 

What theoretical elements are appropriate for the graphical-user interface? 

It is important to match the instructional design to the situation at hand. This means considering the goals of the 
instruction, the needs of the learners, the environment, and so on. While doing so, designers must ask whether situated- 
learning metaphors are appropriate to the audience and the content. If so, what situations are suggested or accommodated? 

Another question that is important to answer in the design phase is how the learning is expected to be constructed. What 
design elements related to learning theory should be evident within the courseware? Is there evidence of learner control 
and autonomy, or is the program designed in a more behavioristic, directed structure? 

How does guided learning fit into the courseware? Is teaming guided in a systematic way, a tightly controlled way, not at 
all, or something in between? What evidence is there of motivating learners and attending to various learning theories? 
Does there seem to be a match between the courseware’s purpose, the audience, skill level, and instructional approach? 
How does the system work together as a whole? 

The new hypermediated courseware could incorporate information from outside sources that the designer cannot determine 
or control. For example, learners could potentially go to certain pages in the World Wide Web (WWW) to get 
information. The problem here for instructional designers will be the dynamic nature of such material; it could be here 
today and gone tomorrow, or changed tomorrow. If WWW resources are incorporated, how will it be managed? 

As more sophisticated graphics are incorporated, it will be important to determine how to manage the complexity created 
by the imagery. How much importance can be placed on a learner’s ability to read visual imagery? What things can we 
do to enhance visual literacy? How will windowing inhibit or enhance learning? Will windowing serve as a way of 
separating information visually or will it interfere with the flow of thought? In what ways can visual text and visual 
graphics help learners maintain a sense of direction as they move through various links? 

There are many questions that lead good instructional design efforts. Although there are no set answers to all of these 
questions, instructional designers can at least address the questions to determine what guidelines will lead the design 
efforts. 

Are the images, language, and content free of cultural and gender bias? 

Media often portrays people in stereotypical roles. Movies, television programs, advertising, books, and now even clip 
art are fraught with stereotypes based upon cultural background, race, and gender (Binns & Branch, 1995; Couch, 1995). 
As courseware developers think about designing, scanning, or downloading images into the courseware, they should 
consider what messages are implied by the images. 

Are the men portrayed in leadership positions, while the women appear in subordinate roles? Are men portrayed in work 
situations or using technology, while women are portrayed in nurturing roles? Are women portrayed as either older and 
overly-grandmotherly, or young and overly-sexy? 
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Are colors and tone used to add feeling or draw attention to an image in a suggestive way that might bias the learners? 
Examples of this are the darkening of O. J. Simpson’s face on the cover of Time magazine (1994) and the bright red 
coloration applied to the woman figure’s nipples in an otherwise dark and muted image depicting a male and female 
within a recent New York Times (1996) report on cancer. The former suggests a guilty verdict prior to the trial while the 
latter continues the American male fixation on women’s breasts as sexual objects, even within an article focused on 
medical education. 

Do sports analogies or competition appeal more to males than females. Are cultural groups represented in true 
proportions and in accurate situations with the examples, imagery, and prerequisite knowledge necessary for successful 
completion? Can the courseware be used in different cultures without bias? This question raises issues of cultural 
sanitation versus lack of bias; where is the line drawn? 



How do the images, language, and content accurately represent the cultural and gender variables? 

This question goes deeper into the underlying messages portrayed through the images, language, and content. Rather 
than simply avoiding stereotypes, it is important to keep the messages in proper context in terms of culture and gender. 
For example, does the design go the extra step to consider and include examples from the cultural group that the 
courseware will be used with? Certain examples will make better sense if the learners can relate to them. 

Messages intended to influence attitudes toward using birth control and planned parenting, need to consider the cultural 
underpinnings of such issues as within the learning group. In cultures where a people’s status is influenced by the 
number or gender of their of children, any attempt to curb birth rates would need a very sensitive approach. Likewise, 
portraying value systems of rural American within inner city schools and vice versa, could make the instruction fall flat. 

Icons and symbology can be problematic. While some icons and symbols are interpreted with similar meanings, others 
will take on different meanings within different international audiences. A dragon, for example, is thought of as a scary 
and evil presence in Western culture, while it is believed to be powerful and even protective in Eastern cultures. 

both the social worker’s and teacher’s products were designed to be used in American, multicultural situations. The 
social work product contained examples form both rural and urban situations to allow more flexibility in meaningful 
usage. 

How should formative and summative evaluation occur? 

The main questions here include the logistics of conducting formative and summative evaluation in a way that produces 
valid results, questions about how the visual elements actually enhance the learning, and determining what questions 
regarding visually literate learners are appropriate in formative and summative evaluations. The evaluation processes for 
both products in this study included written questionnaires, interviews, pretests and posttests, and observations. Yet the 
evaluations to date raise addition questions about hypermedia design. 

Prior to designing the courseware, it will be important to determine what is important at the evaluation phases. What 
will be considered successful and what will be considered problematic? How should the visual elements be evaluated? 
How will designers determine the quality of the use of such things as color and contrast, or whether the design of the user 
interface and examples are appropriate to the content? Certainly it will be important to consider the instructional goals, 
the audience, and the situation in order to answer these questions. 

In addition, how are the functions of the courseware evaluated? What will determine success when measuring links with 
other images and text? What changes are expected in images to enhance the learning? For example, will there be visual 
cues such as a color change to indicate that a section has been completed so that learners will be able to determine their 
position within the user interface? 
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What questions regarding visually literate learners are appropriate in formative and summative evaluations? What is the 
best way to determine learner understanding of the importance of the image or video to the content? How can an 
evaluator determine a learner’s ability to “read” the image or video in context with the text and other elements in the 
graphical-user interface? What standard will determine the learners’ acceptance level and comfort with the graphical-user 

interface? 

All of these questions are difficult to answer because they depend on specific situations at hand. Even though hypermedia 
employs new techniques and holds the potential to incorporate dynamic resources from the internet, a good deal of design 
and evaluation standards carry on from current practice. It will be important to note where differences are important to 
learning while designing for the new hypermedia enhancements and plan to work within a framework that accommodates 
them as well. 

In addition, the hypermedia links create an element of possibility that takes the learning process into a different 
dimension, thus calling upon different ways of learning, using different strategies and different ways of moving between 
topics. Designers can no longer simply assume that learners will move through topics in any given order, but must 
allow them to move around more freely. This implies designing information in smaller, more independent sections, that 
cannot depend on sequence nor amount of information covered to be considered complete. Designers will need to find 
ways to allow learners to enter and exit software with ease enough to accommodate the hypermedia, while attending to 
the completion of cognitive processing of chunks of information that belong together. 

Understanding and emotional impact can be enhanced through powerful computer imagery. The imagery can represent 
real situations or it can create an artificial situation that appears to be real. Hypermedia has tremendous potential in 
terms of visual communications and educational impact, yet we have just begun to find ways to design courseware that 
takes advantage of some of that potential. Continued evaluation is need to examine learner’s beliefs about their success 
with learning in hypermediated environments. There is a need to look not only at the way that instructional designers 
use graphical interfaces to produce hypermediated courseware, but also the way that students employ the graphics and 
spatial organization to construct meaning or knowledge. 
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